<template>
	<div class="layout-padding" style="overflow: hidden">
		<div class="flex flex-col daily-report px-2">
			<div class="h-14 w-full flex mb-1 items-center align-center justify-between border-gray-100">
				<div class="w-20"></div>
				<div class="flex-1 h-[1px] bg-gradient-to-l from-indigo-200 via-indigo-100/50 to-transparent"></div>
				<div class="flex items-center gap-0">
					<div class="flex items-center justify-center w-8 h-8 rounded-lg bg-blue-50 ml-4">
						<el-icon class="text-xl text-blue-700">
							<DataLine />
						</el-icon>
					</div>
					<div class="flex items-center w-full">
						<div class="text-xl font-bold bg-gradient-to-r from-blue-800 to-blue-600 bg-clip-text text-transparent mx-4">
							{{ $t('dailyPaper.dailyPaper') }}
						</div>
					</div>
				</div>
				<div class="flex-1 h-[1px] bg-gradient-to-l to-indigo-200 via-indigo-100/50 from-transparent"></div>
				<el-form :inline="true" :model="from" class="align-center search-form mr-3 mt-4">
					<el-form-item class="label" :label="$t('dailyPaper.time')">
						<el-date-picker v-model="from.time" type="date" style="width: 160px; height: 30px"
							:placeholder="$t('dailyPaper.pleaseSelectDate')" :size="size" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item class="label" :label="$t('dailyPaper.shift')">
						<el-select v-model="from.select"  clearable @change="changeClick"   style="width: 160px; height: 30px">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>

					<el-button icon="Search" class="buttons" size="small" type="primary" @click="getSerch" style="margin-top: 3px">
						{{ $t('agv.inquire') }}
					</el-button>
				</el-form>
				<div class="flex items-center">
					<el-button class="back-btn" @click="generateClick">
						<el-icon><Finished /></el-icon><span>{{ $t('dailyPaper.generate') }}</span></el-button>
					<el-button class="back-btn2 back-btn" @click="pushClick">
						<el-icon><Message /></el-icon><span>{{ $t('dailyPaper.push') }}</span></el-button>
						<el-button class="back-btn" @click="exportxlsx">
							<el-icon><Download /></el-icon><span>{{ $t('common.exportBtn') }}</span>
						</el-button>
				</div>
			</div>

			<!-- 生产计划部分 -->
			<div class="flex-1">
				<div class="w-full h-1/2 section">
					<div class="section-title">
						<el-icon>
							<Platform />
						</el-icon>
						<h3>{{$t('dailyPaper.equipmentOutput')}}</h3>
						<span class="subtitle">Planning & Production</span>
					</div>
					<el-table v-loading="endLoading" :data="productionData" border header-align="center" style="width: 100%"
						height="calc((100vh - 280px) * 0.5)" :header-cell-style="{
							color: '#1e293b',textAlign: 'center',ontWeight: '600',
							background: 'linear-gradient(to bottom, #f8fafc, #f1f5f9)',
							borderColor: '#e2e8f0',height: '30px !important',}"
						header-row-class-name="custom-header"
						:cell-style="{ textAlign: 'center', color: '#334155', borderColor: '#e2e8f0', background: '#fff', height: '30px' }">
						<el-table-column colspan="3">
							<template #header>
								<span class="flex items-center justify-center w-full" style="color: #1d4ed8"
									>{{ $t('dailyPaper.todayQty') }}
									<span class="text-indigo-500 ml-2 text-sm">({{ headerList?.report3 || 0 }})</span>
								</span>
							</template>
							<el-table-column :label="$t('dailyPaper.time')" prop="report1" min-width="10%">
								<template #default="scope">
									<el-tag>{{ `${scope.row.report1.slice(0, 4)}-${scope.row.report1.slice(4, 6)}-${scope.row.report1.slice(6, 8)}` }} </el-tag>
								</template>
							</el-table-column>
							<el-table-column :label="$t('dailyPaper.keyProcess')" prop="report3" min-width="10%">
								<template #default="scope">
									<el-tag type="info" effect="light">{{ scope.row.report3 }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column :label="$t('dailyPaper.turnedOn')" prop="report4" min-width="10%">
								<template #default="scope">
									<el-tag :type="scope.row.report4 > 0 ? 'success' : 'info'" effect="light">{{ scope.row.report4 }} </el-tag>
								</template>
							</el-table-column>
						</el-table-column>
						<el-table-column colspan="3">
							<template #header>
								<span class="flex items-center justify-center w-full" style="color: #1d4ed8"
								>{{ $t('dailyPaper.weekQty') }}
									<span class="text-indigo-500 ml-2 text-sm">({{ headerList?.report4 || 0 }})</span>
								</span>
							</template>
							<el-table-column :label="title+$t('dailyPaper.dailyOutput')" prop="report5" min-width="10%">
								<template #default="scope">
									<el-tag type="success" effect="light">{{ scope.row.report5 }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column :label="title+$t('dailyPaper.daySameThe')" prop="report6" min-width="10%">
								<template #default="scope">
									<el-tag :type="scope.row.report6 == '0/Pcs' || scope.row.report6 == '0/Box' ? 'info' : 'danger'" effect="light"
										>{{ scope.row.report6 }}
									</el-tag>
								</template>
							</el-table-column>
							<el-table-column :label="$t('dailyPaper.passRate')" prop="report7" min-width="12%">
								<template #default="scope">
									<el-link type="success" @click="jumpIn(scope.row)"> {{ scope.row.report7 }}</el-link>
								</template>
							</el-table-column>
						</el-table-column>
						<el-table-column colspan="4" >
							<template #header>
								<span class="flex items-center justify-center w-full" style="color: #1d4ed8"
								>{{ $t('dailyPaper.monthQty') }}
									<!--本月入库-->
									<span class="text-indigo-500 ml-2 text-sm">({{ headerList?.report5 || 0 }})</span>
								</span>
							</template>
							<el-table-column :label="$t('dailyPaper.utilization')" prop="report8" min-width="12%">
								<template #default="scope">
									<el-link type="primary" @click="jumpIn(scope.row)"> {{ scope.row.report8 }}</el-link>
								</template>
							</el-table-column>
								<el-table-column :label="$t('dailyPaper.expatriate')" prop="report9" min-width="8%">
									<template #default="scope">
										<el-tag :type="scope.row.report9 > 0 ? 'success' : 'info'" effect="light">{{ scope.row.report9 }} </el-tag>
									</template>
								</el-table-column>
								<el-table-column :label="$t('dailyPaper.nonExpatriate')" prop="report10" min-width="8%">
									<template #default="scope">
										<el-tag :type="scope.row.report10 > 0 ? 'success' : 'info'" effect="light">{{ scope.row.report10 }} </el-tag>
									</template>
								</el-table-column>
							<!--		异常报警	-->
							<el-table-column :label="$t('dailyPaper.abnormalAlarm')" prop="report11" min-width="8%">
								<template #default="scope">
									<el-tag :type="scope.row.report11 > 0 ? 'success' : 'info'" effect="light">{{ scope.row.report11 }} </el-tag>
								</template>
							</el-table-column>
						</el-table-column>
					</el-table>
				</div>
				<!-- 物料部分 -->
				<div class="w-full h-1/2 mt-2 section">
					<div class="section-title">
						<el-icon><Box /></el-icon>
						<h3>{{ $t('dailyPaper.completeness') }}</h3>
						<span class="subtitle">Key material Readiness</span>
					</div>
					<el-table
						v-loading="endLoading"
						:data="materialData"
						border
						style="width: 100%"
						height="calc((100vh - 280px) * 0.5)"
						header-align="center"
						:header-cell-style="{
							color: '#1e293b',
							textAlign: 'center',
							ontWeight: '600',
							background: 'linear-gradient(to bottom, #f8fafc, #f1f5f9)',
							borderColor: '#e2e8f0',
							height: '30px',
						}"
						:cell-style="{ color: '#334155', borderColor: '#e2e8f0', background: '#fff', height: '30px' }"
					>
						<el-table-column :label="$t('dailyPaper.time')" prop="report1" min-width="11%" align="center">
							<template #default="scope">
								<el-tag class="text-xs">
									{{ `${scope.row.report1.slice(0, 4)}-${scope.row.report1.slice(4, 6)}-${scope.row.report1.slice(6, 8)}` }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column :label="$t('dailyPaper.keyMaterials')" prop="report3" min-width="15%"></el-table-column>
						<el-table-column :label="$t('dailyPaper.modelCategory')" prop="report4" min-width="13%" />
						<el-table-column :label="$t('dailyPaper.initialInventory')" prop="report5" min-width="11%" align="center">
							<template #default="scope">
								<el-tag type="warning" effect="light">{{ scope.row.report5 }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column :label="$t('dailyPaper.sameDayDelivery')" prop="report7" min-width="8%" align="center">
							<template #default="scope">
								<el-tag type="success" effect="light">{{ scope.row.report7 }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column :label="$t('dailyPaper.sndOfDayInventory')" prop="report6" min-width="11%" align="center">
							<template #default="scope">
								<el-link type="primary" @click="jumpIn(scope.row)"> {{ scope.row.report6 }}</el-link>
							</template>
						</el-table-column>
						<el-table-column :label="$t('dailyPaper.inventoryInTransit')" prop="report8" min-width="11%" align="center">
							<template #default="scope">
								<span class="text-gray-400" v-if="scope.row.report8 === '暂无预计到达日期'">{{ scope.row.report8 }}</span>
								<el-tag v-else type="info" size="large" style="padding: 0 20rpx; color: #1e83e9" plain>
									{{ scope.row.report8 }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column :label="$t('dailyPaper.inventoryNumberOf')" prop="report9" min-width="11%" align="center" />
						<el-table-column :label="$t('dailyPaper.riskLevel')" prop="report10" min-width="8%" align="center">
							<template #default="scope">
								<el-tag effect="light" :type="scope.row.report10 !== '风险登记' ? 'success' : 'danger'">
									{{ scope.row.report10 }}
								</el-tag>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import '/@/style/tailwind.css';
import moment from 'moment/moment';
import { Platform, Box } from '@element-plus/icons-vue';
import { dailyPaperOne, dailyPaperPush, dailyPaperSeletc } from '/@/api/platform/mes/dailyPaper';
import { useI18n } from 'vue-i18n';
import { BasicTableProps, useTable } from "/@/hooks/table";

const { t } = useI18n();
const options = computed(() => [
	{
		value: '当日',
		label: t('dailyPaper.allShifts'),
	},
	{
		value: '早班',
		label: t('dailyPaper.earlyShift'),
	},
	{
		value: '晚班',
		label: t('dailyPaper.eveningShift'),
	},
]);
const from = reactive({
	time: '',
	select:'当日'
});
const endLoading = ref(false);
const headerList = ref({});
const title = ref('');
// 生产计划数据
const productionData = ref([]);
// 物料数据
const materialData = ref([]);

onMounted(async () => {
	await getDefaultDateRange();
	await getData();
	title.value=options.value.filter(x=>x.value===from.select)[0].label
});

watch(
	() => options.value.filter(x=>x.value===from.select)[0].label,
	() => {
		title.value=options.value.filter(x=>x.value===from.select)[0].label
	}
);
// 查询条件切换
const changeClick=(e)=>{
	title.value=options.value.filter(x=>x.value===e)[0].label
}

// 设置默认日期
const getDefaultDateRange = async () => {
	const time = moment().subtract(1, 'days').format('YYYY-MM-DD');
	from.time = time;
};

// 生成数据，获取数据
const generateClick = async () => {
	endLoading.value = true;
	await dailyPaperOne()
		.then((res) => {
			if (res.code == 0) {
				endLoading.value = false;
				// productionData.value = res.data.productionDto;
				// materialData.value = res.data.keyMaterialDto;
				// headerList.value = res.data.finishDto;
        getData();
			}
		})
		.catch(async (err) => {
			ElMessage(err.msg);
			await getData();
		});
};

// 推送
const pushClick = async () => {
	// 根据工序汇总求和
	let preams = {
		todayQty: Number(headerList.value?.report3)||0,
		weekQty: Number(headerList.value?.report4)||0,
		monthQty: Number(headerList.value?.report5)||0,
		JC: productionData.value.filter((i) => i?.report3 === '挤出').reduce((sum, record) => sum + (processReport(record?.report5)), 0),
		LVT: productionData.value.filter((i) => i?.report3 === 'LVT').reduce((sum, record) => sum + (processReport(record?.report5)), 0),
		UV: productionData.value.filter((i) => i?.report3 === 'UV淋膜').reduce((sum, record) => sum + (processReport(record?.report5)), 0),
		TH: productionData.value.filter((i) => i?.report3 === '贴合').reduce((sum, record) => sum + (processReport(record?.report5)), 0),
		JKJ: productionData.value.filter((i) => i?.report3 === '锯开检').reduce((sum, record) => sum + (processReport(record?.report5)), 0),
		PE: productionData.value.filter((i) => i?.report3 === 'PE').reduce((sum, record) => sum + (processReport(record?.report5)), 0),
		DB: productionData.value.filter((i) => i?.report3 === '打包').reduce((sum, record) => sum + (processReport(record?.report5)), 0),
	};
	await dailyPaperPush(preams)
		.then((res) => {
			if (res.code == 0) {
				ElMessage({
					message: t('dailyPaper.message'),
					type: 'success',
				});
			}
		})
		.catch((err) => {
			ElMessage(err.msg);
		});
};

const processReport = (record) => {
	if (record == '-') {
		return 0;
	} else if (record?.includes('/')) {
		return Number(record.split('/')[0]);
	} else {
		// 如果既不包含'/'也不包含'-', 可以选择直接返回0或者其他处理方式
		return 0;
	}
};

// 查询
const getSerch = async () => {
	title.value=options.value.filter(x=>x.value===from.select)[0].label
	await getData();
};
const getData = async () => {
	endLoading.value = true;
	await dailyPaperSeletc({
		startTime: from.time,
		shift:from.select=='当日'?'':from.select,
		size: 999999,
		current: 1,
	})
		.then((res) => {
			if (res.code == 0) {
				endLoading.value = false;
				productionData.value = res.data.productionDto.records;
				materialData.value = res.data.keyMaterialDto.records;
				headerList.value = res.data.finishDto;
			}
		})
		.catch((err) => {
			endLoading.value = false;
			ElMessage(err.msg||t('dailyPaper.noDataAvailable'));
		});
};

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: ""
})

const {
  downBlobFile,
  tableStyle
} = useTable(state)
const exportxlsx = () => {
  downBlobFile('/wms/todayReport/ExportTodayReport', {
		shift:'当日',
		startTime: from.time,
		size: 999999,
		current: 1,
  }, 'ExportPoShipDetails' + getNowFormatDate() + '.xlsx');
}
function getNowFormatDate() {
  var date = new Date();
  // 获取年份
  const year = date.getFullYear();

  // 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
  const month = String(date.getMonth() + 1).padStart(2, '0');

  // 获取日期
  const day = String(date.getDate()).padStart(2, '0');

  // 拼接成 年月日时分秒 格式的字符串
  var currentdate = year + month + day
    + date.getHours() + date.getMinutes()
    + date.getSeconds();
  return currentdate;
}
</script>

<style scoped lang="scss">
.daily-report {
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 10px;
	padding-bottom: 5px;

	background-color: #fff;

	.section {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		overflow: hidden;

		.el-table {
			flex: 1;
		}

		.section-title {
			display: flex;
			align-items: center;
			padding: 5px 10px;
			background: #f5f7fa;
			border-radius: 6px;
			margin-bottom: 5px;
			box-sizing: border-box;

			.el-icon {
				font-size: 17px;
				color: var(--el-color-primary);
				margin-right: 12px;
			}

			h3 {
				margin: 0;
				font-size: 13px;
				font-weight: 600;
				color: #303133;
			}

			.subtitle {
				margin-left: 12px;
				color: #909399;
				font-size: 14px;
			}
		}
	}
}

.custom-header {
	height: 30px !important; /* 修改为你需要的具体高度 */
	line-height: 30px !important; /* 确保文字垂直居中 */
}

.buttons {
	height: 30px;
	padding: 5px 10px;
	border-radius: 6px;
	margin-bottom: 20px;
}

.back-btn {
	height: 30px;
	box-sizing: border-box;
	background: linear-gradient(to right, #149331, #09bd42);
	border: none;
	color: white;
	padding: 5px 10px;
	border-radius: 6px;
	font-weight: 500;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 2px 6px rgba(47, 236, 91, 0.2);
	position: relative;

	.el-icon {
		font-size: 16px;
		transition: transform 0.3s ease;
	}

	&:hover {
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(47, 106, 236, 0.3);
		background: linear-gradient(to right, #149331, #09bd42);

		.el-icon {
			transform: translateX(-4px);
		}
	}
}

.back-btn2 {
	background: linear-gradient(to right, #482fec, #671ee5);

	&:hover {
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(47, 63, 236, 0.3);
		background: linear-gradient(to right, #482fec, #671ee5);

		.el-icon {
			transform: translateX(-4px);
		}
	}
}

// 添加标题动画效果
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.text-xl {
	background-size: 200% auto;
	animation: gradient 3s ease infinite;
}
</style>
